<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<script src="js/jquery.min.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<h1>{{address}}</h1> <!-- 不在渲染区内,vue无法修饰 -->
		
		<div id="app" v-cloak> <!-- v-cloak 解决页面闪现问题 -->
			<h2>{{address}}</h2>
			
			<!-- vue实现双向绑定:v-model -->
			<input type="text" id="address" v-model="address" />
			<!-- <p>标签--段落标签,带换行 -->
			<p>{{name}},{{age}}</p>
			<p>{{hobby}},{{hobby.length}},{{hobby[0]}},{{hobby[hobby.length-1]}}</p> <!-- 数组可以直接展现,可以用length属性显示长度,可以直接用下标获取值 -->
			<!-- v-for 循环指令
			 v-for="o in hobby"
			 o---每次遍历的当前值
			 hobby---数组
			 "o,i in hobby"--o 当前值 i 索引值
			 -->
			<p><span v-for="o in hobby"> {{o}}</span></p>
			<p><span v-for="o,i in hobby">{{i}}-{{o}} </span></p>
			<!-- 对象方式,对象 . 操作符,访问其属性值 -->
			<p>{{father}}</p>
			<p>{{father.name}},{{father.age}}</p>
			
			<!-- 判断 v-if="对象.值>=条件"
			条件判断为true,则输出
			v-show--不论条件是否成立,都在页面上展现,通过样式控制是否展现出来(如判断值频繁切换,性能高)
			v-if--只展现条件成立的语句,条件不成立的不展现
			 -->
			<p v-show="father.age>=18">成年</p>
			<p v-show="father.age<18">未成年</p>
			<p v-if="father.age>=18">成年</p>
			<p v-if="father.age<18">未成年</p>
			<p v-if="money>=1900">一线不差钱</p>
			<p v-else-if="money>=1200">二线不差钱</p>
			<p v-else-if="money>=600">三线不差钱</p>
			<p v-else>不活了</p>
			
			<!-- 往常插值表达式写在页面上,写在属性中会把表达式整体识别为字符串,会报错 -->
			<!-- 链接:<a href="{{url}}" target="_blank">百度搜索</a> -->
			<!-- 解决方案:1.去掉{{}},2.在href属性前加v-bind:(简写为:),告诉vue这个属性后面的值是变量,不是字符串,必须解析 -->
			<a :href="url" target="_blank">百度搜索</a>
			
			<!-- vue事件 v-on事件
			 创建vue方法 method---show(),打印控制台
			 -->
			<br />按钮1 <button onclick="alert('请给智商充值')">点击</button>
			<!-- v-on:click="show"可简写  @click="show" -->
			<br />按钮2 <button v-on:click="show">点我</button>
		</div>
		
	</body>
</html>

<script>
	//创建vue对象
	var vm = new Vue({
				 el:"#app",	//挂载点
				 data:{	//数据区
				 	address:"天津德云社",
					name:"于谦",
					age:50,
					money:10,
					url:"http://www.baidu.com",
					hobby:["抽烟","喝酒","烫头"],
					father:{
						name:"王老爷子",
						age:80
					}
				 },
				 methods:{	//方法区
					 show:function(){
						 console.log("vue show fun");
					 }
				 }
			 });
</script>